<template>
  <div ref="chartRef" class="pieEchart"></div>
</template>

<script setup>
import * as echart from 'echarts'
import { ref, onUnmounted, onMounted, defineProps } from 'vue'

let chartRef = ref()
let myChart
let props = defineProps({
    value:{
        type:Array,
        required: true
    }
})
console.log(props.value,'=========')
onUnmounted(()=>{
    myChart.dispose()
    myChart = null
})
onMounted(()=>{
    myChart = echart.init(chartRef.value)
    const option = {
        tooltip:{
            trigger: 'item'
        },
        color:['#ffd666', '#ffa39e', '#409EFF'],
        series:[
            {
                name:'hehe',
                type:'pie',
                radius: '70%',
                data:props.value
            }
        ]
    }
    // window.onResize = ()=>{
    //     myChart.resize()
    // }
    myChart.setOption(option)
})
</script>

<style scoped>
.pieEchart {
    width:400px;
    height:400px;
}
</style>